<template>
  <div class="pic-box">
    <el-row class="select-box">
      <el-col :span="24">
        平台 
        <el-select v-model="platform" placeholder="请选择" size="small" style="margin-right: 10px;" @change="relatedVersion">
          <el-option v-for="item in platforms" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        版本 
        <el-select v-model="version" placeholder="请选择" size="small">
          <el-option v-for="item in versions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="pic-data">
      <h4 class="data-title">图片下载数据</h4>
      <el-row type="flex" justify="space-around">
        <el-col :span="3" style="background: #00c0ef;">
          <span class="figure"><label>1.2</label> %</span>
          <span class="declare">图片下载率</span>
        </el-col>
        <el-col :span="3" style="background: #F56C6C;">
          <span class="figure"><label>50</label> 次</span>
          <span class="declare">平均耗时</span>
        </el-col>
        <el-col :span="3" style="background: #00a65a;">
          <span class="figure"><label>1200</label> 位</span>
          <span class="declare">下载量</span>
        </el-col>     
      </el-row>
    </div>
    <div>
      <h4>图片各地区下载详情</h4>
      <div class="tableMain" >
        <div class="tableTcp">
          <div class="tableTcpTitle">
            <div class="title">TCP</div>
            <div class="colorList">
              <div class="colordiv">
                <div class="colorli"><span class="color green"></span><span class="text"> 98%-100%</span></div>
                <div class="colorli"><span class="color lightgreen"></span><span class="text"> 95%-98%</span></div>
                <div class="colorli"><span class="color yellow"></span><span class="text"> 90%-95%</span></div>
                <div class="colorli"><span class="color orange"></span><span class="text"> 80%-90%</span></div>
                <div class="colorli"><span class="color red"></span><span class="text"> 0%-80%</span></div>
              </div>
              <div class="colordiv">
                <div class="colorli"><span class="color green"></span><span class="text"> 0-1s</span></div>
                <div class="colorli"><span class="color lightgreen"></span><span class="text"> 1-2s</span></div>
                <div class="colorli"><span class="color yellow"></span><span class="text"> 2-3s</span></div>
                <div class="colorli"><span class="color orange"></span><span class="text"> 3-4s</span></div>
                <div class="colorli"><span class="color red"></span><span class="text"> 4s+</span></div>
              </div>
            </div>
          </div>
          <template>
            <el-table :data="tcpTableData" class="tabledata" :default-sort = "{prop: 'date', order: 'descending'}">
              <el-table-column prop="area" label="地区" > </el-table-column>
              <el-table-column label="成功率"  prop="successRatio" sortable> 
                <template slot-scope="scope">
                  <span class="color green" v-if="scope.row.successStatus == 1"></span>
                  <span class="color lightgreen" v-if="scope.row.successStatus == 2"></span>
                  <span class="color yellow" v-if="scope.row.successStatus == 3"></span>
                  <span class="color orange" v-if="scope.row.successStatus == 4"></span>
                  <span class="color red" v-if="scope.row.successStatus == 5"></span>
                  <span class="text">{{ scope.row.successRatio }}%</span>
                </template>
              </el-table-column>
              <el-table-column label="耗时"  prop="timeConsuming" sortable>
                <template slot-scope="scope">
                  <span class="color green" v-if="scope.row.ConsumeStatus == 1"></span>
                  <span class="color lightgreen" v-if="scope.row.ConsumeStatus == 2"></span>
                  <span class="color yellow" v-if="scope.row.ConsumeStatus == 3"></span>
                  <span class="color orange" v-if="scope.row.ConsumeStatus == 4"></span>
                  <span class="color red" v-if="scope.row.ConsumeStatus == 5"></span>
                  <span class="text">{{ scope.row.timeConsuming }}s</span>
                </template>
              </el-table-column>
              <el-table-column prop="success" label="成功数" sortable> </el-table-column>
              <el-table-column prop="error" label="失败数" sortable> </el-table-column>
            
            </el-table>
          </template>
        </div>
        <div class=" tableHttp">
          <div class="tableTcpTitle">
            <div class="title">HTTP</div>
            <div class="colorList">
              <div class="colordiv">
                <div class="colorli"><span class="color green"></span><span class="text"> 98%-100%</span></div>
                <div class="colorli"><span class="color lightgreen"></span><span class="text"> 95%-98%</span></div>
                <div class="colorli"><span class="color yellow"></span><span class="text"> 90%-95%</span></div>
                <div class="colorli"><span class="color orange"></span><span class="text"> 80%-90%</span></div>
                <div class="colorli"><span class="color red"></span><span class="text"> 0%-80%</span></div>
              </div>
              <div class="colordiv">
                <div class="colorli"><span class="color green"></span><span class="text"> 0-1s</span></div>
                <div class="colorli"><span class="color lightgreen"></span><span class="text"> 1-2s</span></div>
                <div class="colorli"><span class="color yellow"></span><span class="text"> 2-3s</span></div>
                <div class="colorli"><span class="color orange"></span><span class="text"> 3-4s</span></div>
                <div class="colorli"><span class="color red"></span><span class="text"> 4s+</span></div>
              </div>
            </div>
          </div>
          <template>
            <el-table :data="httpTableData" class="tabledata" :default-sort = "{prop: 'date', order: 'descending'}">
              <el-table-column prop="area" label="地区" > </el-table-column>
              <el-table-column label="成功率" prop="successRatio" sortable> 
                <template slot-scope="scope">
                  <span class="color green" v-if="scope.row.successStatus == 1"></span>
                  <span class="color lightgreen" v-if="scope.row.successStatus == 2"></span>
                  <span class="color yellow" v-if="scope.row.successStatus == 3"></span>
                  <span class="color orange" v-if="scope.row.successStatus == 4"></span>
                  <span class="color red" v-if="scope.row.successStatus == 5"></span>
                  <span class="text">{{ scope.row.successRatio }}%</span>
                </template>
              </el-table-column>
              <el-table-column label="耗时" prop="timeConsuming" sortable>
                <template slot-scope="scope">
                  <span class="color green" v-if="scope.row.ConsumeStatus == 1"></span>
                  <span class="color lightgreen" v-if="scope.row.ConsumeStatus == 2"></span>
                  <span class="color yellow" v-if="scope.row.ConsumeStatus == 3"></span>
                  <span class="color orange" v-if="scope.row.ConsumeStatus == 4"></span>
                  <span class="color red" v-if="scope.row.ConsumeStatus == 5"></span>
                  <span class="text">{{ scope.row.timeConsuming }}s</span>
                </template>
              </el-table-column>
              <el-table-column prop="success" label="成功数" sortable> </el-table-column>
              <el-table-column prop="error" label="失败数" sortable> </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
    </div>
          
  </div>
</template>

<script>
// 平台
  var platforms = [
    {
      value: 'app',
      label: 'APP',
      versions: [
        { value: '4.0', label: '4.0' },
        { value: '3.0', label: '3.0' },
        { value: '2.0', label: '2.0' },
        { value: '1.0', label: '1.0' }
      ]
    },
    {
      value: 'ios',
      label: 'IOS',
      versions: [
        { value: '9.0', label: '9.0' },
        { value: '8.0', label: '8.0' },
        { value: '7.0', label: '7.0' },
        { value: '6.0', label: '6.0' }
      ]
    },
    {
      value: 'window',
      label: 'Window',
      versions: [
        { value: '11', label: '11' },
        { value: '10', label: '10' },
        { value: '9', label: '9' },
        { value: '8', label: '8' },
        { value: '7', label: '7' },
        { value: 'xp', label: 'XP' }
      ]
    }
  ]

  export default {
    data () {
      return {
        platform: '',
        version: '',
        platforms: platforms,
        versions: '',
        tcpTableData: [{
          area: '东京',
          successRatio: '98',
          timeConsuming: '0.33',
          successStatus: 1,
          ConsumeStatus: 1,
          success: 66,
          error: 33
        }, {
          area: '曼谷',
          successRatio: '90',
          timeConsuming: '0.33',
          successStatus: 2,
          ConsumeStatus: 1,
          success: 22,
          error: 33
        }, {
          area: '首尔',
          successRatio: '80',
          timeConsuming: '0.33',
          successStatus: 5,
          ConsumeStatus: 1,
          success: 55,
          error: 33
        }, {
          area: '新加坡',
          successRatio: '90',
          timeConsuming: '1.33',
          successStatus: 2,
          ConsumeStatus: 2,
          success: 22,
          error: 33
        }],
        httpTableData: [{
          area: '东京',
          successRatio: '98',
          timeConsuming: '0.33',
          successStatus: 1,
          ConsumeStatus: 1,
          success: 45,
          error: 33
        }, {
          area: '曼谷',
          successRatio: '90',
          timeConsuming: '4.1',
          successStatus: 2,
          ConsumeStatus: 5,
          success: 44,
          error: 33
        }, {
          area: '首尔',
          successRatio: '98',
          timeConsuming: '0.33',
          successStatus: 1,
          ConsumeStatus: 1,
          success: 44,
          error: 33
        }, {
          area: '新加坡',
          successRatio: '90',
          timeConsuming: '0.33',
          successStatus: 1,
          ConsumeStatus: 1,
          success: 44,
          error: 33
        }],
        editableTabsValue2: '2',
        editableTabs2: [{
          title: '中国',
          name: '1'
        }, {
          title: '亚洲',
          name: '2'
        }],
        tabIndex: 2
      }
    },
    methods: {
      // 版本关联平台
      relatedVersion (value) {
        var vm = this
        vm.version = ''
        var platforms = vm.platforms
        for (let i = 0; i < platforms.length; i++) {
          if (platforms[i].value === value) {
            vm.versions = platforms[i].versions
          }
        }
      }
    }
  }
</script>

<style  scoped lang="scss">
  .pic-data{
    border-bottom: 1px solid #eee;
    .el-row{
      margin-bottom: 15px;
      .el-col{
        color: #fff;
        border-radius: 5px;
        span{
          display: block;
          text-align: center;
          label{
            font-size: 20px;
            font-weight: bold;
          }
        }
        .figure{
          padding: 10px 0;
        }
        .declare{
          // color: #666;
          color: #fff;
          margin-bottom: 15px;
        }
      }
    }
  }
  .select-box {
    border-bottom: 1px solid #eee;
    .el-col{
      text-align: right;
      margin-bottom: 15px;
    }
    
  }
  
  .tableMain{
    overflow: hidden;
    .color{
        width: 10px;
        height: 10px;
        text-align: center;
        margin-right: 6px;
        display: inline-block;
        line-height: 24px;
        padding-top: 8px;
    }
    .green{
        background: #339205;
    }
    .lightgreen{
      background: #67C23A;
    }
    .yellow{
        background: #ffeb3b;
    }
    .orange{
      background: #ff5722;
    }
    .red{
      background: #f44336;
    }
    .title{
        // display: inline-block;
        padding: 4px 18px 0;
        float: left;
    }
    .colorList{
        // display: inline-block;
        float: left;
        .colorli{
            display: inline-block;
            margin-right: 8px;
            .text{
                display: inline-block; 
                line-height: 24px;
                font-size: 12px;
                min-width:60px; 
            }
        }
    }
    .tabledata{
      .text{
          display: inline-block; 
          line-height: 24px;
      }
    }
    .tableTcp{
      width: 49%;
      border:1px solid #eee;
      float: left;
        .tableTcpTitle{
          padding: 10px;
          overflow: hidden;
        }
    }
    .tableHttp{
      width: 49%;
      margin-left: 10px;
      border:1px solid #eee;
      float: left;
      .tableTcpTitle{
          padding: 10px;
          overflow: hidden;
          .title{
            padding: 6px 14px ;
          }
        }
    }

}
</style>